<template>
  <status-bar></status-bar>
  <back-page name="arrow-left">
    <text class="text-base font-medium ml-4">设置</text>
  </back-page>
  <!--  设置页面内容-->
  <view class="flex flex-col gap-14">
    <!--    处理设置页面的清除缓存以及其他功能的跳转功能-->
    <setting-icon-to :icon-list="iconList">
      <template #showData>
        <text>{{ cacheSize }}kb</text>
      </template>
    </setting-icon-to>
    <btn-click @handleClick="handleLogout" v-if="userStore.loginStatus"
      >退出登录
    </btn-click>
  </view>
</template>

<script setup lang="ts">
import StatusBar from '@/layout/PageItemComponents/statusBar.vue'
import BackPage from '@/layout/components/BackPage.vue'
import { onMounted, ref } from 'vue'
import SettingIconTo from '@/layout/PageItemComponents/settingIconTo.vue'
import BtnClick from '@/layout/components/BtnClick.vue'
import { loginOut } from '@/api/loginOut'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

interface IconList {
  iconName: string
  toUrl: string
  text: string
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        loginOut().then(() => {
          userStore.logOut()
        })
        uni.switchTab({ url: '/pages/my/my' })
      }
    }
  })
}
const iconList = ref<IconList[]>([
  {
    iconName: '\ue60c',
    text: '账号与安全',
    toUrl: 'user-safe'
  },
  {
    iconName: '\ue60c',
    text: '资料编辑',
    toUrl: 'user-editinfo'
  },
  {
    iconName: '',
    text: '清除缓存',
    toUrl: ''
  },
  {
    iconName: '\ue60c',
    text: '意见反馈',
    toUrl: 'user-feedback'
  },
  {
    iconName: '\ue60c',
    text: '关于社区',
    toUrl: 'about-us'
  }
])
// 缓存数据大小
const cacheSize = ref<number>(0)
onMounted(async () => {
  cacheSize.value = await userStore.initCacheSize()
})
</script>

<style scoped lang="scss"></style>
